<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">

<!-- 导航 -->
<div id="nav" class="pure-u" th:fragment="aside-nav">
    <a href="javascript:void(0);" class="nav-menu-button">Menu</a>
    <div class="nav-inner">
        <button class="primary-button pure-button">DIMPLES</button>

        <div class="pure-menu">
            <ul class="pure-menu-list">
                <li class="pure-menu-item" th:each="notebook : ${notebookName}">
                    <a href="javascript:void(0);" class="pure-menu-link">
                        <span th:text="${notebook.notebookName}">文件夹一</span>
                        (&nbsp;<span class="note-count" th:text="${notebook.count}">2</span>&nbsp;)
                    </a>
                </li>
                <li class="pure-menu-heading">分类</li>
                <li class="pure-menu-item">
                    <a href="javascript:void(0);" class="pure-menu-link">
                        <span class="note-label-personal"></span>学习
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="javascript:void(0);" class="pure-menu-link">
                        <span class="note-label-work"></span>工作
                    </a>
                </li>
                <li class="pure-menu-item">
                    <a href="javascript:void(0);" class="pure-menu-link">
                        <span class="note-label-travel"></span>杂记
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 笔记列表 -->
<div id="list" class="pure-u-1" th:fragment="aside-list">
    <div class="note-item-search">
        <form id="search" class="pure-form" style="text-align: center;width: 100%">
            <label for="search-text"></label>
            <input type="text" id="search-text" class="pure-input-rounded pure-input-1"
                   placeholder="好记性不如烂键盘" name="search">
            <!-- <button class="fa fa-search primary-button pure-button"></button> -->
        </form>
    </div>
    <div class="note-item-body">
        <!-- <div class="note-item note-item-selected pure-g"> -->
        <div class="note-item pure-g">
            <div class="pure-u">
                <img width="64" height="64" alt="Tilo Mitra&#x27;s avatar" class="note-avatar"
                     src="" th:src="@{/note/img/tilo-avatar.png}">
            </div>

            <div class="pure-u-3-4">
                <!--<h5 class="note-name">Tilo Mitra</h5>-->
                <h4 class="note-subject">Hello from Toronto</h4>
                <p class="note-desc">
                    Hey, I just wanted to check in with you from Toronto. I got here earlier
                    today.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- 移动设备底部导航 -->
<nav class="mobile-bottom-nav" th:fragment="aside-mobile-bottom-nav">
    <div class="mobile-bottom-nav__item mobile-bottom-nav__item--active">
        <div class="mobile-bottom-nav__item-content">
            <i class="fa fa-list"></i>
            最近
        </div>
    </div>
    <div class="mobile-bottom-nav__item">
        <div class="mobile-bottom-nav__item-content">
            <i class="fa fa-folder"></i>
            文件夹
        </div>
    </div>
    <div class="mobile-bottom-nav__item">
        <div class="mobile-bottom-nav__item-content">
            <div id="search-icon">
                <div id="circle-big" class="circle"></div>
                <div id="circle-small" class="circle">
                    <div id="line-left" class="line"></div>
                    <div id="line-right" class="line"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="mobile-bottom-nav__item">
        <div class="mobile-bottom-nav__item-content">
            <i class="fa fa-tags"></i>
            标签
        </div>
    </div>
    <div class="mobile-bottom-nav__item">
        <div class="mobile-bottom-nav__item-content">
            <i class="fa fa-user"></i>
            个人
        </div>
    </div>
</nav>
</html>



























